<template>
  <div>
    <div class="map" id="bd_map_d"></div>

    <el-input v-model="inputPlace" size="large" width="300px" placeholder="Type something">
      <template #prefix>
        <el-icon class="el-input__icon">
          <search />
        </el-icon>
      </template>
      <template #suffix>
        <el-button type="primary" size="large" @click="searchMap">
          Search
          <el-icon class="el-icon--right">
            <Search />
          </el-icon>
        </el-button>
      </template>
    </el-input>


  </div>

</template>
 
<script>

import BMap from 'BMap'
export default {
  name: "NavigationMap",
  data() {
    return {
      inputPlace: "诸城市",
    }
  },
  methods: {
    initMap() {
      this.searchMap();

    },

    searchMap() {
      console.log(this.inputPlace);
      var localSearch = new BMap.LocalSearch("诸城市");
      localSearch.search(this.inputPlace);
      localSearch.setSearchCompleteCallback(function (result) {
        if (result != undefined) {
          console.log("搜索完成");
          let point = localSearch.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          let map = new BMap.Map('bd_map_d');
          map.centerAndZoom(point, 18);
          let marker = new BMap.Marker(point); // 创建标注
          map.addOverlay(marker); // 将标注添加到地图中
          marker.enableDragging(); // 可拖拽
          map.enableScrollWheelZoom(true);
          /* eslint-disable */
          var ctrl_nav = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
          });
          map.addControl(ctrl_nav);
          // 向地图中添加缩略图控件
          var ctrl_ove = new BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: 1
          });
          map.addControl(ctrl_ove);
          // 向地图中添加比例尺控件
          var ctrl_sca = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
          });
          map.addControl(ctrl_sca);
          /* eslint-enable */
        }
        else console.log("搜索失败");
      });
    },




  },



  mounted() {
    this.initMap();
    this.searchMap();
  }

}

</script>
 
<style scoped>
.map {
  width: 100%;
  height: 350px;
}
</style>